<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
        <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" />
        <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'" />
        <title>番茄钟</title>
        <link rel="stylesheet" href="css/style.css" />
        <!-- 引入 timer.js 包源码 -->
        <script src="lib/timer.js"></script>
        <!-- 引入 progressbar.js 包源码 -->
        <script src="lib/progressbar.js"></script>
    </head>
    <body class="flex-center">
        <!-- 首页默认展示时间 -->
        <div class="timer-container flex-center">
            <div id="timer" class="timer">25:00</div>
        </div>
        <div class="progressbar">
            <div class="progress-bar"></div>
        </div>

        <div class="controls">
            <button class="btn start_btn">开始</button>
            <button class="btn start_btn reset_btn">重置</button>
        </div>

        <dialog id="action">
            <div class="win">
                <h3>要休息吗？</h3>
                <div class="btn-container">
                    <button class="btn work_btn">工作</button>
                    <button class="btn rest_btn">休息</button>
                </div>
            </div>
        </dialog>

        <script src="./renderer.js"></script>
    </body>
</html>
